<template>
  <el-card>
    <h1>手动同步</h1>
    <el-button @click="connSocket"></el-button>
    <el-divider></el-divider>
    <el-form label-position="left" label-width="220px">
      <el-form-item label="方式：">
        <el-radio-group v-model="tbType" size="small">
          <el-radio label="3" value="3" border>部分</el-radio>
          <el-radio label="0" value="0" border>全部</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="天数：">
        <el-input-number :disabled="tbType!=='3'" v-model="inputNumber" placeholder="天数" :min="0" :max="30" size="small"></el-input-number>
      </el-form-item>
      <el-form-item label="API同步(会消耗api请求次数)：">
        <el-button-group style="width: 99%;">
          <el-tooltip content="一键同步：立即开始同步天数范围内的客户信息和订单信息，（产品信息需要手动同步）">
            <el-button @click="allTB" type="primary" plain size="small">一键同步</el-button>
          </el-tooltip>

          <el-tooltip content="API同步客户信息（ERP=&gt;CRM）：立即开始同步天数范围内的客户信息">
            <el-button @click="controlClientTB" type="primary" plain size="small">API同步客户信息</el-button>
          </el-tooltip>

          <el-tooltip content="API同步订单信息（CRM=&gt;ERP）：立即开始同步天数范围内的订单信息">
            <el-button @click="controlOrderTB" type="primary" plain size="small">API同步订单信息</el-button>
          </el-tooltip>

        </el-button-group>
      </el-form-item>
      <el-form-item label="EXCEL同步：">
        <el-button-group style="width: 99%;">
          <el-tooltip content="下载客户信息（ERP=&gt;CRM）：将下载下来的excel导入到富通天下的客户模块中">
            <el-button @click="downClientTB" type="primary" plain size="small">下载客户信息</el-button>
          </el-tooltip>
          <el-tooltip content="下载产品信息（ERP=&gt;CRM）：将下载下来的excel导入到富通天下的产品模块中">
            <el-button @click="downOrderTB" type="primary" plain size="small">下载订单信息</el-button>
          </el-tooltip>
          <el-tooltip content="下载订单信息（ERP=&gt;CRM）：将下载下来的excel导入到富通天下的订单模块中">
            <el-button @click="downProductTB" type="primary" plain size="small">下载产品信息</el-button>
          </el-tooltip>
        </el-button-group>
      </el-form-item>
<!--      <el-form-item label="报价单Excel：">-->
<!--        <el-tooltip content="应急灯同步">-->
<!--          <v-upload @returnSrc="handleAvatarSuccess" :btuText="'上传应急灯报价单'"></v-upload>-->
<!--        </el-tooltip>-->
<!--        <el-tooltip content="应急电源同步">-->
<!--          <v-upload @returnSrc="handleAvatarSuccess" :btuText="'上传应急电源报价单'"></v-upload>-->
<!--        </el-tooltip>-->
<!--      </el-form-item>-->
      <el-form-item label="进度:">
        <el-progress :percentage="percentage"></el-progress>
      </el-form-item>
    </el-form>
    <el-page-header style="margin-top: 40px;" content="API同步详情"></el-page-header>
    <el-divider></el-divider>
    <el-table :data="tbData" max-height="350px">
      <el-table-column type="index" label="no"></el-table-column>
      <el-table-column prop="no" label="编码" width="150px"></el-table-column>
      <el-table-column prop="type" label="操作" width="80px">
        <template slot-scope="scope" >
          <el-tag :type="scope.row.type==='新增'? 'primary':'warning'">{{scope.row.type}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="data" label="数据" show-overflow-tooltip></el-table-column>
      <el-table-column prop="result" label="同步结果"  width="600"></el-table-column>

    </el-table>
  </el-card>
</template>

<script>
import vUpload from "./vUpload.vue"
export default {
  name: "MCCRM",
  components:{vUpload},
  data() {
    return {
      tbType:"3", //同步方式
      inputNumber: 1,
      percentage:0,

      tbData:[],  //同步信息
    }
  },
  mounted() {
    this.connSocket()
  },
  methods:{
    connSocket(){
      // 创建WebSocket连接
      this.socket = new WebSocket("ws://192.168.10.108:3500");

      // 当连接打开时的回调函数
      this.socket.onopen = () => {
        console.log("WebSocket连接已打开");
        this.$notify({
          title: '提示',
          message: 'WebSocket连接已打开',
          duration: 0
        });
      };

      // 当接收到消息时的回调函数
      this.socket.onmessage = event => {
        // console.log(event.data)
        let resBody = JSON.parse(event.data)
        let funname =resBody.fun
        let data = resBody.data
        this[funname](data)
        // this.messages.push(event.data);
      };

      // 当连接关闭时的回调函数
      this.socket.onclose = () => {
        console.log("WebSocket连接已关闭");
        this.$notify({
          title: '提示',
          message: 'WebSocket连接已断开',
          duration: 0
        });
        // setTimeout(()=>{
        //   this.connSocket()
        // },10000)
      };

      // 当发生错误时的回调函数
      this.socket.onerror = error => {
        console.error("WebSocket连接发生错误:", error);
      };
    },
    beforeDestroy() {
      // 在组件销毁之前关闭WebSocket连接
      this.socket.close();
    },
    /**
     * 发送信息到后台
     * @param data
     */
    sendMsg(data) {
      // 在组件销毁之前关闭WebSocket连接
      console.log(data)
      this.socket.send(JSON.stringify(data))
    },

    allTB() {
      this.$confirm('此操作将同步客户、订单信息, 确认继续?', '提示', {

      }).then(res=>{
        this.tbData = []
        this.percentage = 0
        this.sendMsg({
          fun:"apiAllTB",
          data: {
            queryType:this.tbType,
            days:this.inputNumber
          }
        })
      })
    },
    /**
     * API同步客户
     */
    controlClientTB() {
      this.$confirm('此操作将同步客户, 确认继续?', '提示', {

      }).then(res=>{
        this.tbData = []
        this.percentage = 0
        this.sendMsg({
          fun:"apiClientTB",
          data: {
            queryType:this.tbType,
            days:this.inputNumber
          }
        })
      })
    } ,
    /**
     * API同步订单
     */
    controlOrderTB() {
      this.$confirm('此操作将同步订单信息, 确认继续?', '提示', {

      }).then(res=>{
        this.tbData = []
        this.percentage = 0
        this.sendMsg({
          fun:"apiOrderTB",
          data: {
            queryType:this.tbType,
            days:this.inputNumber
          }
        })
      })
    } ,
    /**
     * 下载客户EXCEL
     */
    downClientTB() {
      this.$confirm('此操作将下载时间范围内的客户信息, 确认继续?', '提示', {

      }).then(res=>{
        this.sendMsg({
          fun:"clientTB",
          data: {
            queryType:this.tbType,
            days:this.inputNumber
          }
        })
      })

    } ,
    /**
     * 下载订单EXCEL
     */
    downOrderTB() {
      this.$confirm('此操作将下载时间范围内的订单信息, 确认继续?', '提示', {

      }).then(res=>{
        this.sendMsg({
          fun:"orderTB",
          data: {
            queryType:this.tbType,
            days:this.inputNumber
          }
        })
      })

    } ,
    /**
     * 下载产品EXCEL
     */
    downProductTB() {
      this.$confirm('此操作将下载时间范围内的产品信息, 确认继续?', '提示', {

      }).then(res=>{
        this.sendMsg({
          fun:"productTB",
          data: {
            queryType:this.tbType,
            days:this.inputNumber
          }
        })
      })

    } ,
    /**
     * 下载文件
     * @param fileURL
     */
    downloadFile(fileURL){
      window.open(fileURL.url);
    },
    /**
     * 改变进度
     */
    changeProgress(val){
      this.percentage = parseInt(val.progress)
    },
    /**
     * 上传成功
     */
    handleAvatarSuccess(){

    },
    /**
     * 显示同步详情
     */
    apiTBinfo(res){
      this.tbData.push(res)
      console.log(this.tbData)
    }
  }
}
</script>

<style scoped>

</style>
